import React from 'react';
import { Button, Col, Row, Typography, Card, Space } from 'antd';
import { 
  AppstoreOutlined, 
  EditOutlined, 
  AntDesignOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  return (
    <div>
      {/* Banner Section */}
      <div 
        style={{ 
          backgroundColor: '#001529', 
          color: 'white', 
          padding: '120px 24px 80px', 
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden'
        }}
      >
        {/* Background decorative elements */}
        <div style={{ 
          position: 'absolute', 
          top: '-100px', 
          left: '-100px', 
          width: '300px', 
          height: '300px', 
          borderRadius: '50%', 
          background: 'linear-gradient(90deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%)',
          zIndex: 0
        }} />
        <div style={{ 
          position: 'absolute', 
          bottom: '-150px', 
          right: '-50px', 
          width: '400px', 
          height: '400px', 
          borderRadius: '50%', 
          background: 'linear-gradient(90deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%)',
          zIndex: 0
        }} />
        
        <div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', width: '100%' }}>
          <Title 
            level={1} 
            style={{ 
              color: 'white', 
              fontSize: '3.5rem', 
              fontWeight: 800,
              marginBottom: '24px',
              textShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
            }}
          >
            Ant Design 5.0
          </Title>
          <Paragraph 
            style={{ 
              fontSize: '1.3rem', 
              maxWidth: '700px', 
              margin: '0 auto 40px',
              color: 'rgba(255, 255, 255, 0.85)',
              fontWeight: 300
            }}
          >
            助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～
          </Paragraph>
          <Space size="large">
            <Button type="primary" size="large" style={{ padding: '0 40px', height: '48px', fontSize: '16px' }}>
              开始使用
            </Button>
            <Button size="large" style={{ padding: '0 40px', height: '48px', fontSize: '16px', background: 'rgba(255, 255, 255, 0.1)', color: 'white', borderColor: 'rgba(255, 255, 255, 0.3)' }}>
              设计语言
            </Button>
          </Space>
        </div>
      </div>

      {/* Features Section */}
      <div style={{ padding: '100px 24px', maxWidth: '1200px', margin: '0 auto' }}>
        <Title 
          level={2} 
          style={{ 
            textAlign: 'center', 
            marginBottom: '80px',
            fontWeight: 800,
            fontSize: '2.5rem'
          }}
        >
          丰富的组件与设计语言
        </Title>
        <Row gutter={[48, 48]} justify="center">
          <Col span={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <AppstoreOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>组件丰富</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                大量实用组件满足你的需求，灵活定制与拓展
              </Paragraph>
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <EditOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>设计语言</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                配套生态，让你快速搭建网站应用
              </Paragraph>
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <AntDesignOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>灵活定制</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                支持多种主题定制，满足个性化需求
              </Paragraph>
            </Card>
          </Col>
        </Row>
      </div>

      {/* Component Preview Section */}
      <div style={{ 
        background: 'linear-gradient(135deg, #f5f8ff 0%, #e6f7ff 100%)', 
        padding: '100px 24px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', textAlign: 'center' }}>
          <Title 
            level={2} 
            style={{ 
              fontWeight: 800,
              fontSize: '2.5rem',
              marginBottom: '24px'
            }}
          >
            组件预览
          </Title>
          <Paragraph style={{ 
            fontSize: '1.1rem', 
            maxWidth: '700px', 
            margin: '0 auto 60px',
            color: 'rgba(0, 0, 0, 0.65)'
          }}>
            丰富的组件库，帮助你快速构建高质量的用户界面
          </Paragraph>
          
          {/* Component Preview Cards */}
          <div style={{ 
            display: 'flex',
            justifyContent: 'center',
            gap: '24px',
            flexWrap: 'wrap'
          }}>
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Button 按钮</Title>
              <Paragraph type="secondary">标记了一个（或封装一组）操作命令</Paragraph>
            </Card>
            
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Input 输入框</Title>
              <Paragraph type="secondary">通过鼠标或键盘输入内容</Paragraph>
            </Card>
            
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Card 卡片</Title>
              <Paragraph type="secondary">通用卡片容器</Paragraph>
            </Card>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div 
        style={{ 
          backgroundColor: '#fff', 
          padding: '100px 24px', 
          textAlign: 'center',
          maxWidth: '1200px', 
          margin: '0 auto'
        }}
      >
        <Title level={2} style={{ fontWeight: 800, marginBottom: '24px' }}>
          准备好开始使用了么？
        </Title>
        <Paragraph style={{ fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 40px', color: 'rgba(0, 0, 0, 0.65)' }}>
          数千名满意用户已经通过我们的平台改变了他们的工作流程
        </Paragraph>
        <Button type="primary" size="large" style={{ padding: '0 48px', height: '48px', fontSize: '16px' }}>
          立即开始
        </Button>
      </div>
    </div>
  );
};

export default Home;